<template>
  <div class="eminent">
    <el-col :span="24" class="action-bar">
			<el-button type="primary" size="medium" @click="newEminent">新增</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
      <el-table-column prop="img" label="头像" width="150" sortable>
		  <template slot-scope="scope">
					<div>
						<img :src="scope.row.img_url" @click="prevImg(scope.row.img_url)" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="姓名" width="150" sortable>
			</el-table-column>
			<el-table-column prop="position" label="职位" width="150" sortable>
			</el-table-column>
			<el-table-column prop="own_company" label="所属企业" width="300" sortable>
			</el-table-column>
			<el-table-column prop="vip_name" label="会员级别" width="150" sortable>
			</el-table-column>
			<el-table-column label="操作" width="280">
				<template slot-scope="scope">
					<div>
						<el-button type="primary" size="mini" @click="editorEminent(scope.row.id)">编辑</el-button>
						<el-button type="danger" class="danger-btn" size="mini" @click="delEminent(scope.row.id)">删除</el-button>
						<el-button type="Success" class="danger-btn" size="mini" @click="getEminent(scope.row.id)">查看详情</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>


		<!-- 编辑 新增-->
		<el-dialog title="编辑人物" :visible.sync="addFormVisible" width="50%" @close="initData">
			<el-form :model="addForm" label-width="80px">
        		<el-form-item label="图片" prop="img">
					<el-upload
						class="avatar-uploader"
						action="https://www.rzkeji.com/api/file/upload-img"
						name="photo"
						:show-file-list="false"
						:on-success="handlePhoto"
						:before-upload="beforeAvatarUpload">
						<img v-if="photoImg" :src="photoImg" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
					<!-- <el-select
					v-model="addForm.name"
					filterable
					remote
					allow-create
					@change="getExecutor"
					:loading="loading"
					placeholder="请输入会员名"
					:remote-method="searchName"
						>
					<el-option
						v-for="(item,index) in vipList"
						:key="item.vip_id"
						:label="item.realname"
						:value="index">
					</el-option>
				</el-select> -->
				</el-form-item>
				<el-form-item label="职位" prop="position">
					<el-input v-model="addForm.position" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="所属企业" prop="company">
					<el-input v-model="addForm.company" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="会员级别">
					<el-select v-model="addForm.level" placeholder="请选择">
						<el-option
							v-for="item in levelOptions"
							:key="item.code"
							:label="item.name"
							:value="item.id"
							>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序" prop="company">
					<el-input v-model="addForm.sort" type="number"></el-input>
				</el-form-item>
				<el-form-item label="人物简介">
					<el-input type="textarea" :autosize="{ minRows: 4}" v-model="addForm.intro"></el-input>
				</el-form-item>
				<el-form-item label="详细介绍">
					<editor v-model="editorContent" v-if="editorShow"></editor>
				</el-form-item>
		</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="setChamberCommerceElite">提交</el-button>
			</div>
		</el-dialog>

		<!-- 详情-->
		<el-dialog title="编辑人物" :visible.sync="detailVisible" width="50%" @close="initData">
			<el-form :model="addForm" label-width="80px">
        		<el-form-item label="图片" prop="img">
					<img  :src="photoImg" class="avatar">
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<div>{{member.name}}</div>
				</el-form-item>
				<el-form-item label="职位" prop="position">
					<div>{{member.position}}</div>
				</el-form-item>
				<el-form-item label="所属企业" prop="company">
					<div>{{member.own_company}}</div>
				</el-form-item>
				<el-form-item label="会员级别">
					<div>{{member.vip_name}}</div>
				</el-form-item>
				<el-form-item label="排序" prop="company">
					<div>{{member.sort}}</div>
				</el-form-item>
				<el-form-item label="人物简介">
					<div>{{member.introduction}}</div>
				</el-form-item>
				<el-form-item label="详细介绍">
					<div v-html="member.info" class="member-detail"></div>
				</el-form-item>
		</el-form>
		</el-dialog>

		<!-- 图片预览 -->
		<!-- <el-dialog :visible.sync="prevImgVisible" size="tiny">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog> -->
		<el-dialog :visible.sync="prevImgVisible" size="tiny" center width="500px">
			<div style="display:flex;justify-content:center">
				<img style="max-width:100%" :src="dialogImageUrl" alt="">
			</div>
		</el-dialog>
		<!-- 图片预览 end -->
  </div>
</template>

<script>
import editor from '@/components/editor'
export default {
  data(){
    return{
		prevImgVisible:false,//图片预览的显示
		dialogImageUrl:'',//预览的图片地址
	  addFormVisible: false,//新增界面是否显示
	  detailVisible:false,//详情界面的显示
		photoImg: '',
		photoId:'',
		id:'',//杰出人物id
		users:[],
		//新增界面数据
		addForm: {
			img:'',
			name: '',
			position: '',//职位
			company: '',
			level: '',
			sort:'',
			intro:''//人物简介
		},
		//会员级别
		levelOptions: [],
		editorContent: '',
		editorShow: false,
		member:'',//详细信息
		loading:false,
		vipList:'',
		totalPage:0,
		page:1
    }
  },
  components:{
    editor
  },
  methods:{
	  prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
    beforeAvatarUpload(file) {
			//上传照片前的操作
			console.log(file,555)
		},
	handlePhoto(res, file) {
		//上传头像成功
		if(res.data){
			this.photoImg=res.data.img_url;
			this.photoId=res.data.id;
		}
	},
	handleAvatarSuccess(res, file) {
		//上传照片成功
		if(res.data){
			this.memberPicImg=res.data.img_url;
			this.memberPicId=res.data.id;
		}
	},
	getExecutor(e){
		//获取用户名
		var item=''
		if(isNaN(e)==false){
			 item=this.vipList[e]
		}
		if(item){
			this.addForm.level=+item.vip_level
		}else{
			this.addForm.level=''
		}
		console.log('执行了')
	},
	async searchName(name){
			//搜索用户名
			this.loading=true;
			if(!name){
				this.vipList=[];
				this.loading=false
				return
			}
			const res=await this.$api.getUserVipList ({
				page:0,
				pagesize:16,
				realname:name
			})
			if(res.data.level=='success'){
				this.vipList=res.data.data.user_vip_list
			}
			this.loading=false
    	},
	async getUserVipRule(){
		//获取会员等级&缴费规则接口
		const data=await this.$api.getUserVipRule();
		if(data.data.level=='success'){
			let list= data.data.data.vip_list;
			this.levelOptions=list;

		}
		},
		newEminent(){
			//新增
			this.addFormVisible=true;
		},
		editorEminent(id){
			//编辑
			this.id=id;
			this.chamberCommerceEliteSet();
			this.addFormVisible=true;
		},
		getEminent(id){
			this.id=id;
			this.detailVisible=true;
			this.chamberCommerceEliteSet();
		},
		delEminent(id){
			//删除
			const judge= this.$confirm('删除该杰出人物?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.delChamberCommerceElite({id});
					if(res.data.level=='success'){
						this.chamberCommerceEliteList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
		},
	async setChamberCommerceElite(){
		//设置杰出人物
		const res=await this.$api.setChamberCommerceElite({
			img_id:this.photoId,
			name:this.addForm.name,
			position:this.addForm.position,
			own_company:this.addForm.company,
			introduction:this.addForm.intro,//富文本
			info:this.editorContent,
			sort:this.addForm.sort,
			vip_rule_id:this.addForm.level,
			id:this.id
		})
		if(res.data.level=='success'){
			this.addFormVisible=false;
			this.chamberCommerceEliteList();
			this.$message({
				type:'success',
				message:res.data.message
			})
		}else{
			this.$message({
				type:'error',
				message:res.data.message
			})
		}
	},
	async chamberCommerceEliteSet(){
		//获取杰出人物信息
		const res=await this.$api.chamberCommerceEliteSet({id:this.id});
		if(res.data.level=='success'){
			this.member=res.data.data;
			const data=res.data.data;
			this.photoImg=data.img_url;
			this.photoId=data.img_id;
			this.addForm.name=data.name;
			this.addForm.position=data.position;
			this.addForm.company=data.own_company;
			this.addForm.level=+data.vip_rule_id||'';
			this.addForm.sort=data.sort;
			this.editorContent=data.info;
			this.addForm.intro= data.introduction;

			this.editorShow=false;
			setTimeout(()=>{
				this.editorShow=true
			})

		}else{
			this.$message({
				type:'error',
				message:res.data.message
			})
		}
	},
	async chamberCommerceEliteList(){
		//获取列表
		const res=await this.$api.chamberCommerceEliteList({
			page:this.page,
			limit:16
		})
		if(res.data.level=='success'){
			this.users=res.data.data;
			this.totalpage='';
		}
	},
	pageChange(e){
			//翻页
			this.page=e;
			this.chamberCommerceEliteList()
		},
	initData(){
		this.photoImg= '';
		this.photoId='';
		this.id='';//杰出人物id
		this.addForm= {
			img:'',
			name: '',
			position: '',//职位
			company: '',
			level: '',
			sort:'',
			intro:''//人物简介
		};
		this.editorContent= '';
		this.member='';
		this.editorShow=false;
		setTimeout(()=>{
			this.editorShow = true;
		},500)
	}
	},
	mounted() {
		this.getUserVipRule();
		this.chamberCommerceEliteList();
		setTimeout(()=>{
        this.editorShow = true;
      },500)
	},
}
</script>
<style lang='scss' scoped>
.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
	}
  .eminent{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
	.member .el-dialog__body{overflow: auto;}
	.member-detail img{
		max-width: 100%;
	}
</style>